<!-- 消息内容 -->
<template>
  <div id="" class="messageCon">
    <img class="headerimg" :src="imgUrlLink(msgCon.ballUser.headPortrait)" alt="">
    <div class="messagediv" @click="toMsgcon">
      <span class="name">{{msgCon.ballUser.nickName}}</span>
      <p class="">{{msgCon.content}}</p>
      <div class="replyMsg" v-for="reply in msgCon.reply" :key="reply.key">
        <span>{{reply.ballUser.nickName}}：</span>
        {{reply.content}}
      </div>
      <div class="circlebtm">
        <span>{{reviewTime(msgCon.review_time)}}</span>
        <!-- <span>
          <img src="@/assets/playcircleImage/reply_icon.png" alt=""> 24
          <img src="@/assets/playcircleImage/snap2.png" alt=""> 36
        </span> -->
      </div>
    </div>
  </div>
</template>
<script>
import { dateChangeTime } from '@/utils/util.js';
export default {
  name: "",
  props: ['msgCon'],
  data: () => ({

  }),
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    toMsgcon() {
      this.$router.push({path:'/eventmsgCon',query:{msgCon:this.msgCon}});
    },
    reviewTime(time) {
      return dateChangeTime(time);
    }
  },
  mounted() {
    //do something after mounting vue instance
  }
}
</script>
<style lang="scss" scoped>

.messageCon{
  @include flex;
  align-items: flex-start;
  margin-bottom: 10px;
  .headerimg{
    width: 50px; height: 50px;
    border-radius: 100%;
  }
  .messagediv{
    @include flexcell;
    border-bottom: 1px solid $borderColor;
    margin-left: 10px;
    line-height: 1.5em;
    .name{
      color: $lightColor;
      font-size: 12px;
    }
  }
}
.replyMsg{
  background: $boxBgcolor;
  padding: 6px 10px;
  margin-bottom: 10px;
  span{
    color: $blueColor;
  }
}
.circlebtm{
  @include flex;
  justify-content: space-between;
  color: $grayColor;
  margin-bottom: 10px;
  img{
    width: 15px;
  }
  span:last-child{
    img{
      margin-left: 10px;
    }
  }
}
</style>
